<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>

		<u-sticky offset-top="0">
			<view class="sticky-header">
				<view class="header-top">
					<u-icon name="arrow-left" bold color="#000" size="30rpx" @click="onBack()"></u-icon>
					<view class="header-input">
						<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
						<!-- #ifndef APP-NVUE -->
						<u-input placeholder="搜索订单" shape="circle" border="none" v-model="searchVal" color="#000"
							fontSize="26rpx" placeholder-style="color:rgba(120, 120, 130, 1)" clearable
							confirmType="search" @confirm="onSearch">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input placeholder="搜索订单" shape="circle" border="none" v-model="searchVal" color="#000"
								fontSize="26rpx" placeholder-style="color:rgba(120, 120, 130, 1)" clearable
								confirmType="search" @confirm="onSearch">
							<!-- #endif -->
								<u-icon slot="prefix" name="search" color="rgba(120, 120, 130, 1)" size="30"></u-icon>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
					<view class="header-search">
						搜索
					</view>
				</view>

				<u-tabs :list="list1" :scrollable="false" @click="selectOrderType"
					:lineColor="`url(/static/order/tabs-line.png) no-repeat center`" lineWidth="60rpx"
					lineHeight="10rpx" :activeStyle="{
				        color: '#292930',
				        fontWeight: 'bold',
				        transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				        color: '#292930',
				        transform: 'scale(1)',
				    }">
				</u-tabs>

				<view class="tabs-wrapper">
					<view v-for="(item, index) in list2" :key="index" class="tab-item"
						:class="{ 'tab-item--active': current === index }" @tap="onTabChange(index)">
						<text class="tab-text">{{ item.name || item }}</text>
					</view>
				</view>
			</view>
		</u-sticky>

		<!-- 页面内容区域 - 独立滚动 -->
		<scroll-view class="content" scroll-y="true" :style="contentStyle" @scrolltolower="loadMore"
			v-show="currentOrderTpye == 1">
			<!-- 这里放你的页面内容 -->
			<view class="content-placeholder">
				<view class="order-item" v-for="(guideItem,index) in guideOrderList" :key="index">
					<!-- 订单编号 -->
					<view class="order-number">
						<text>订单编号：{{guideItem.orderNo}}</text>
						<image src="/static/order/copy.png" mode="" @click="copyOrderNumber(guideItem.orderNo)"></image>
					</view>

					<!-- 用户信息和订单状态 -->
					<view class="user-info">
						<image :src="guideItem.customerImage" class="avatar"></image>
						<text class="username">{{ guideItem.customerName }}</text>
						<text class="status"
							:style="{ color: getStatusColor(guideItem.orderStatus) }">{{ formatOrderStatus(guideItem.orderStatus) }}</text>

					</view>
					<u-line color="#2929300D"></u-line>
					<!-- 服务信息 -->
					<view class="service-info">
						<view class="info-row">
							<text class="label">向导服务：</text>
							<text class="value">{{guideItem.serviceType}}</text>
						</view>
						<view class="info-row" v-if="guideItem.startTime&&guideItem.endTime">
							<text class="label">预约服务时间：</text>
							<text class="value">{{formattedTime(guideItem.startTime,guideItem.endTime)}}</text>
						</view>
						<view class="info-row">
							<text class="label">下单时间：</text>
							<text class="value"><uni-dateformat :date="guideItem.createdAt"
									:threshold="[0,0]"></uni-dateformat></text>
						</view>
						<view class="info-row">
							<text class="label">总计：</text>
							<text class="value price">￥{{guideItem.totalAmount}}</text>
						</view>
					</view>
					<u-line color="#2929300D"></u-line>
					<!-- 操作按钮 -->
					<view class="action-buttons">
						<!-- <view class="btn cancel-btn" @click="cancelOrder">取消订单</view> -->
						<view class="btn modify-btn" v-show="guideItem.orderStatus == 1"
							@click.stop="modifyPrice(guideItem)">改价</view>
						<view class="btn cancel-btn" v-show="guideItem.orderStatus > 2"
							@click.stop="deleteOrder(guideItem)">
							删除</view>
					</view>

				</view>

				<!-- 加载状态 -->
				<view class="loading-container" v-if="guideLoading">
					<u-loading-icon size="36" text="加载中"></u-loading-icon>
				</view>

				<!-- 没有更多数据 -->
				<view class="no-more" v-if="!guideHasMore && guideOrderList.length > 0">
					<text>没有更多数据了</text>
				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="guideOrderList.length === 0 && !guideLoading">
					<image src="/static/common/empty.png" class="empty-image"></image>
					<text class="empty-text">暂无订单数据</text>
				</view>
			</view>
		</scroll-view>

		<scroll-view class="content" scroll-y="true" :style="contentStyle" @scrolltolower="loadMore"
			v-show="currentOrderTpye == 0">
			<!-- 这里放你的页面内容 -->
			<view class="content-placeholder">
				<view class="order-item" v-for="(myItem,index) in myOrderList" :key="index"
					@click="handleDetail(myItem)">
					<!-- 订单编号 -->
					<view class="order-number">
						<text>订单编号：{{myItem.orderNo}}</text>
						<image src="/static/order/copy.png" mode="" @click="copyOrderNumber(myItem.orderNo)"></image>
					</view>

					<!-- 用户信息和订单状态 -->
					<view class="user-info">
						<image :src="myItem.userImage" class="avatar"></image>
						<text class="username">{{ myItem.userName }}</text>
						<text class="status"
							:style="{ color: getStatusColor(myItem.orderStatus) }">{{ formatOrderStatus(myItem.orderStatus) }}</text>

					</view>
					<u-line color="#2929300D"></u-line>
					<!-- 服务信息 -->
					<view class="service-info">
						<view class="info-row">
							<text class="label">向导服务：</text>
							<text class="value">{{myItem.serviceType}}</text>
						</view>
						<view class="info-row" v-if="myItem.startTime&&myItem.endTime">
							<text class="label">预约服务时间：</text>
							<text class="value">{{formattedTime(myItem.startTime,myItem.endTime)}}</text>
						</view>
						<view class="info-row">
							<text class="label">下单时间：</text>
							<text class="value"><uni-dateformat :date="myItem.createdAt"
									:threshold="[0,0]"></uni-dateformat></text>
						</view>
						<view class="info-row">
							<text class="label">总计：</text>
							<text class="value price">￥{{myItem.totalAmount}}</text>
						</view>
					</view>
					<u-line color="#2929300D"></u-line>
					<!-- 操作按钮 -->
					<view class="action-buttons">
						<view class="btn cancel-btn" v-show="myItem.orderStatus <= 2" @click.stop="cancelOrder(myItem)">
							取消订单
						</view>
						<view class="btn cancel-btn" v-show="myItem.orderStatus > 2" @click.stop="deleteOrder(myItem)">
							删除</view>
						<view class="btn modify-btn" v-show="myItem.orderStatus == 1">立即支付
						</view>
					</view>
				</view>

				<!-- 加载状态 -->
				<view class="loading-container" v-if="myLoading">
					<u-loading-icon size="36" text="加载中"></u-loading-icon>
				</view>

				<!-- 没有更多数据 -->
				<view class="no-more" v-if="!myHasMore && myOrderList.length > 0">
					<text>没有更多数据了</text>
				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="myOrderList.length === 0 && !myLoading">
					<image src="/static/common/empty.png" class="empty-image"></image>
					<text class="empty-text">暂无订单数据</text>
				</view>
			</view>
		</scroll-view>

		<!-- 改价弹框 -->
		<u-popup :show="showModifyPricePopup" mode="bottom" round="10" @close="showModifyPricePopup = false">
			<view class="modify-price-popup">
				<view class="popup-header">
					<text class="popup-title-left">改价</text>
					<text class="order-number-text">订单编号：{{currentOrder.orderNo}}</text>
					<u-icon name="close" color="#999" size="24" @click="showModifyPricePopup = false"></u-icon>
				</view>

				<view class="price-input-wrapper">
					<text class="currency-symbol">￥</text>
					<input type="digit" v-model="newPrice" placeholder="0" maxlength="10" class="price-input"
						disabled />
				</view>

				<view class="keyboard">
					<!-- 数字键盘 -->
					<view class="key-row">
						<view class="key" @tap="appendDigit('1')">1</view>
						<view class="key" @tap="appendDigit('2')">2</view>
						<view class="key" @tap="appendDigit('3')">3</view>
					</view>
					<view class="key-row">
						<view class="key" @tap="appendDigit('4')">4</view>
						<view class="key" @tap="appendDigit('5')">5</view>
						<view class="key" @tap="appendDigit('6')">6</view>
					</view>
					<view class="key-row">
						<view class="key" @tap="appendDigit('7')">7</view>
						<view class="key" @tap="appendDigit('8')">8</view>
						<view class="key" @tap="appendDigit('9')">9</view>
					</view>
					<view class="key-row">
						<view class="key key--empty"></view>
						<view class="key" @tap="appendDigit('0')">0</view>
						<view class="key delete-key" @tap="deleteDigit">
							<u-icon name="backspace" size="28" color="#666"></u-icon>
						</view>
					</view>
				</view>

				<view class="action-buttons">
					<view class="btn cancel-btn" @tap="showModifyPricePopup = false">取消</view>
					<view class="btn confirm-btn" :class="{ 'confirm-btn--disabled': !isValidPrice }"
						@tap="confirmModifyPrice">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 取消订单弹框组件 -->
		<cancel-order-popup :show="showCancelPopup" :refundAmount="refundAmount" @update:show="showCancelPopup = $event"
			@submit="handleCancelOrder" @close="handlePopupClose" />
	</view>
</template>

<script>
	import {
		ordersList,
		updateMoney,
		deleteOrders,
		updateOrdersStatus
	} from '@/request/api.js';
	import CancelOrderPopup from './modal/cancel-order-popup.vue';
	export default {
		components: {
			CancelOrderPopup
		},
		data() {
			return {
				searchVal: '',
				current: 0, // 添加当前选中索引，默认第一个
				list1: [{
					name: '我的订单',
				}, {
					name: '向导订单',
				}],
				list2: [{
						name: '全部',
						status: null // 全部不传状态
					},
					{
						name: '待付款',
						status: 1
					},
					{
						name: '进行中',
						status: 2
					},
					{
						name: '已完成',
						status: 3
					},
					{
						name: '已取消',
						status: 4
					}
				],
				statusBarHeight: 0,
				headerHeight: 0, // 头部总高度
				currentOrderTpye: 0, //当前选中的订单类型，0我的订单 1 向导订单
				currentStatus: null, // 当前选中的订单状态

				// 向导订单相关
				guideOrderList: [],
				guidePageNum: 1,
				guidePageSize: 10,
				guideTotal: 0,
				guideLoading: false,
				guideHasMore: true,

				// 我的订单相关
				myOrderList: [],
				myPageNum: 1,
				myPageSize: 10,
				myTotal: 0,
				myLoading: false,
				myHasMore: true,

				// 改价模块
				showModifyPricePopup: false, // 控制弹框显示隐藏
				newPrice: '', // 输入的价格
				currentOrder: {}, // 当前操作的订单

				// 取消订单模块
				showCancelPopup: false, // 取消订单弹框显示状态
				refundAmount: 300, // 示例金额，实际从 pageData 获取
			}
		},
		computed: {
			contentStyle() {
				return {
					height: `calc(100vh - ${this.headerHeight}px)`
				}
			},
			isValidPrice() {
				return this.newPrice && parseFloat(this.newPrice) > 0;
			},
		},
		// 在组件创建时设置默认值
		onLoad(option) {
			// 获取状态栏高度
			this.getStatusBarHeight();

			// 在下一个时间点获取头部高度
			this.$nextTick(() => {
				this.calculateHeaderHeight();
			});

			// 可以在这里设置默认选中的标签
			if (option.tabIndex) {
				this.current = parseInt(option.tabIndex);
				this.currentStatus = this.list2[this.current].status;
			}

			// 初始化加载数据
			this.getGuideList(true);
			this.getMyOrderList(true);

		},
		onShow() {
			this.getMyOrderList(true);
		},
		methods: {
			// 去详情页
			handleDetail(item) {
				const id = item.id
				uni.navigateTo({
					url: '/pages_sub/order/order-detail?id=' + id
				})
			},
			formattedTime(startTime, endTime) {
				const start = new Date(startTime);
				const end = new Date(endTime);

				// 获取年份、月份和日期
				const startYear = start.getFullYear();
				const endYear = end.getFullYear();

				// 格式化月份和日期，确保两位数
				const formatMonthDay = (date) => {
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					const day = date.getDate().toString().padStart(2, '0');
					return `${month}月${day}日`;
				};

				// 如果年份相同
				if (startYear === endYear) {
					return `${startYear}年${formatMonthDay(start)} 至 ${formatMonthDay(end)}`;
				} else {
					// 年份不同
					return `${startYear}年${formatMonthDay(start)} 至 ${endYear}年${formatMonthDay(end)}`;
				}
			},
			formatOrderStatus(orderStatus) {
				switch (orderStatus) {
					case 1:
						return '待付款';
					case 2:
						return '进行中';
					case 3:
						return '已完成';
					case 4:
						return '已取消';
					default:
						return '';
				}
			},
			// 根据订单状态获取颜色
			getStatusColor(orderStatus) {
				switch (orderStatus) {
					case 1: // 待付款
						return '#FF4D4F';
					case 2: // 进行中
						return '#52C41A';
					case 3: // 已完成
						return '#1890FF';
					case 4: // 已取消
						return '#999999';
					default:
						return '#999999';
				}
			},
			// 获取向导订单列表
			getGuideList(isRefresh = false) {
				if (this.guideLoading && !isRefresh) return;

				if (isRefresh) {
					this.guidePageNum = 1;
					this.guideHasMore = true;
					this.guideOrderList = [];
				}

				this.guideLoading = true;

				let params = {
					serviceProviderId: this.$store.state.userInfo.userId,
					pageNum: this.guidePageNum,
					pageSize: this.guidePageSize,
					searchVal: this.searchVal
				}

				// 添加订单状态参数（如果不为null）
				if (this.currentStatus !== null) {
					params.orderStatus = this.currentStatus;
				}

				ordersList(params).then(res => {
					if (res.data.code == 200) {
						const newList = res.data.rows || [];
						const total = res.data.total || 0;

						if (isRefresh) {
							this.guideOrderList = newList;
						} else {
							this.guideOrderList = [...this.guideOrderList, ...newList];
						}

						this.guideTotal = total;
						this.guideHasMore = this.guideOrderList.length < total;

						// 如果还有数据，页码+1
						if (newList.length > 0) {
							this.guidePageNum++;
						}
					} else {
						uni.showToast({
							title: res.data.msg || '获取订单失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取订单列表失败:', err);
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				}).finally(() => {
					this.guideLoading = false;
				});
			},

			// 我的订单
			getMyOrderList(isRefresh = false) {
				if (this.myLoading && !isRefresh) return;

				if (isRefresh) {
					this.myPageNum = 1;
					this.myHasMore = true;
					this.myOrderList = [];
				}

				this.myLoading = true;

				let params = {
					customerId: this.$store.state.userInfo.userId,
					pageNum: this.myPageNum,
					pageSize: this.myPageSize,
					searchVal: this.searchVal
				}

				// 添加订单状态参数（如果不为null）
				if (this.currentStatus !== null) {
					params.orderStatus = this.currentStatus;
				}

				ordersList(params).then(res => {
					if (res.data.code == 200) {
						const newList = res.data.rows || [];
						const total = res.data.total || 0;

						if (isRefresh) {
							this.myOrderList = newList;
						} else {
							this.myOrderList = [...this.myOrderList, ...newList];
						}

						this.myTotal = total;
						this.myHasMore = this.myOrderList.length < total;

						// 如果还有数据，页码+1
						if (newList.length > 0) {
							this.myPageNum++;
						}
					} else {
						uni.showToast({
							title: res.data.msg || '获取订单失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取订单列表失败:', err);
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				}).finally(() => {
					this.myLoading = false;
				});
			},

			// 加载更多
			loadMore() {
				if (this.currentOrderTpye === 0) {
					// 我的订单
					if (this.myLoading || !this.myHasMore) return;
					this.getMyOrderList(false);
				} else {
					// 向导订单
					if (this.guideLoading || !this.guideHasMore) return;
					this.getGuideList(false);
				}
			},

			// 搜索
			onSearch() {
				if (this.currentOrderTpye === 0) {
					this.getMyOrderList(true);
				} else {
					this.getGuideList(true);
				}
			},

			selectOrderType(e) {
				this.currentOrderTpye = e.index;
				// 切换订单类型时重置状态为全部
				this.current = 0;
				this.currentStatus = null;
				// 切换订单类型时重新加载数据
				if (this.currentOrderTpye === 0) {
					this.getMyOrderList(true);
				} else {
					this.getGuideList(true);
				}
			},

			// 获取状态栏高度
			getStatusBarHeight() {
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight;
				console.log('状态栏高度:', this.statusBarHeight);
			},

			// 计算头部总高度
			calculateHeaderHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.sticky-header').boundingClientRect(data => {
					if (data) {
						this.headerHeight = data.height + this.statusBarHeight;
						console.log('头部总高度:', this.headerHeight);
					}
				}).exec();
			},

			onTabChange(index) {
				this.current = index;
				this.currentStatus = this.list2[index].status;

				// 根据选中的标签加载数据
				console.log('切换到标签:', this.list2[index].name, '状态:', this.currentStatus);
				this.loadTabData();
			},

			loadTabData() {
				// 重置搜索条件
				this.searchVal = '';
				if (this.currentOrderTpye === 0) {
					this.getMyOrderList(true);
				} else {
					this.getGuideList(true);
				}
			},

			// 示例方法，你需要根据实际需求实现
			loadAllOrders() {
				console.log('加载全部订单');
				// 调用API加载数据
			},

			loadPendingOrders() {
				console.log('加载待付款订单');
				// 调用API加载数据
			},

			loadPaidOrders() {
				console.log('加载已付款订单');
				// 调用API加载数据
			},

			loadCompletedOrders() {
				console.log('加载已完成订单');
				// 调用API加载数据
			},

			loadRefundOrders() {
				console.log('加载退款/售后订单');
				// 调用API加载数据
			},

			onBack() {
				uni.navigateBack();
			},

			loadPosts(refresh) {
				// 搜索逻辑
				console.log('搜索:', this.searchVal);
				if (this.currentOrderTpye === 0) {
					this.getMyOrderList(true);
				} else {
					this.getGuideList(true);
				}
			},
			copyOrderNumber(orderNo) {
				uni.setClipboardData({
					data: orderNo,
					success: () => {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
			cancelOrder(order) {
				uni.showModal({
					title: '提示',
					content: '确定要取消当前订单吗？',
					confirmColor: '#FB941E',
					success: (res) => {
						if (res.confirm) {
							this.currentCancelOrderNo = order.orderNo
							this.showCancelPopup = true;
							// let params = {
							// 	orderNo: order.orderNo,
							// }
							// updateOrdersStatus(params).then(res => {
							// 	if (res.data.code == 200) {
							// 		uni.showToast({
							// 			title: '取消订单成功',
							// 			icon: 'none',
							// 			duration: 2000
							// 		});
							// 		setTimeout(() => {
							// 			if (this.currentOrderTpye === 0) {
							// 				this.getMyOrderList(true);
							// 			} else {
							// 				this.getGuideList(true);
							// 			}
							// 		}, 2000)
							// 	}
							// })
						}
					}
				});
			},
			deleteOrder(order) {
				uni.showModal({
					title: '确定要删除当前订单吗？',
					content: '一经删除不可恢复，请谨慎操作！',
					confirmColor: '#FB941E',
					success: (res) => {
						if (res.confirm) {
							let params = {
								orderNo: order.orderNo,
							}
							deleteOrders(params).then(res => {
								if (res.data.code == 200) {
									uni.showToast({
										title: '删除订单成功',
										icon: 'none',
										duration: 2000
									});
									setTimeout(() => {
										if (this.currentOrderTpye === 0) {
											this.getMyOrderList(true);
										} else {
											this.getGuideList(true);
										}
									}, 2000)
								}
							})
						}
					}
				});
			},

			// 改价模块=====================================================================
			// 打开改价弹框
			modifyPrice(order) {
				this.currentOrder = order;
				this.showModifyPricePopup = true;
				this.newPrice = ''; // 设置当前价格
			},

			// 添加数字到输入框
			appendDigit(digit) {
				// 如果是第一个字符是0，则替换
				if (this.newPrice === '0') {
					this.newPrice = digit;
				} else {
					this.newPrice += digit;
				}

				// 限制最大长度
				if (this.newPrice.length > 8) {
					this.newPrice = this.newPrice.slice(0, 8);
				}
			},

			// 删除最后一位
			deleteDigit() {
				if (this.newPrice.length > 0) {
					this.newPrice = this.newPrice.slice(0, -1);
				}
			},

			// 确认修改价格
			confirmModifyPrice() {
				if (!this.isValidPrice) {
					uni.showToast({
						title: '请输入有效价格',
						icon: 'none'
					});
					return;
				}

				let params = {
					orderNo: this.currentOrder.orderNo,
					totalAmount: this.newPrice,
					serviceProviderId: this.currentOrder.serviceProviderId
				}
				updateMoney(params).then(res => {
					if (res.data.code == 200) {
						// 提示成功
						uni.showToast({
							title: '改价成功',
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							// 关闭弹框
							this.showModifyPricePopup = false;
							// 刷新订单数据
							if (this.currentOrderTpye === 0) {
								this.getMyOrderList(true);
							} else {
								this.getGuideList(true);
							}
						}, 2000)
					}
				})
			},
			// 取消订单
			// 处理取消订单提交
			handleCancelOrder(cancelData) {
				// 发起取消订单请求
				uni.showLoading({
					title: '正在取消...'
				});

				let params = {
					orderNo: this.currentCancelOrderNo,
					remarks: cancelData.reason,
				}
				updateOrdersStatus(params).then(() => {
					uni.hideLoading();
					this.showCancelPopup = false;
					uni.showToast({
						title: '取消成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						this.getMyOrderList(true);
					}, 1000);
				}).catch(() => {
					uni.hideLoading();
				});
			},

			// 处理弹框关闭
			handlePopupClose() {
				this.showCancelPopup = false;
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		height: 100vh;
		overflow: hidden;
	}

	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(to bottom, #FFF1D0, #F8F8F8);
		background-size: 100% 30vh;
		background-repeat: no-repeat;

		/* 状态栏占位 */
		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
			flex-shrink: 0;
		}

		/* 吸顶头部区域 */
		.sticky-header {
			background: linear-gradient(to bottom, #FFF1D0, transparent);
			flex-shrink: 0;
		}

		.header-top {
			display: flex;
			align-items: center;
			padding: 20rpx;

			.header-address {
				margin: 0 10rpx;
				color: #000;
				font-size: 28rpx;
				font-weight: bold;
			}

			.header-input {
				flex: 1;
				height: 60rpx;
				border-radius: 30rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				background-color: #fff;

				.header-input-btn {
					width: 94rpx;
					text-align: center;
					margin-right: 6rpx;
					background-color: rgba(255, 123, 6, 1);
					border-radius: 30rpx;
					color: #fff;
					font-size: 26rpx;
					height: 50rpx;
					line-height: 50rpx;
				}
			}

			.header-search {
				margin-left: 20rpx;
				width: 60rpx;
				font-size: 26rpx;
			}
		}

		.tabs-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			margin-top: 40rpx;

			// 隐藏滚动条
			&::-webkit-scrollbar {
				display: none;
			}

			.tab-item {
				padding: 16rpx 20rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				font-size: 26rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				transition: all 0.3s ease;
				cursor: pointer;

				// 最后一个元素不需要右边距
				&:last-child {
					margin-right: 0;
				}
			}

			.tab-item--active {
				background-color: #FFA704 !important;
				color: #ffffff;
				font-weight: bold;
				transform: scale(1.05);
			}

			.tab-item:not(.tab-item--active) {
				background-color: #ffffff;
				color: #292930;
				transform: scale(1);
			}

			.tab-text {
				white-space: nowrap;
				font-size: 28rpx;
				line-height: 1;
			}
		}

		/* 页面内容区域 - 独立滚动 */
		.content {
			flex: 1;
			background-color: #f8f8f8;

			.content-placeholder {
				padding: 20rpx;

				.order-item {
					padding: 20rpx;
					background-color: white;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				}

				.order-number {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #4D4D56;
					margin-bottom: 20rpx;

					image {
						margin-left: 20rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}

				.user-info {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
				}

				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.username {
					font-size: 30rpx;
					color: #000;
					flex: 1;
				}

				.status {
					font-size: 30rpx;
					font-weight: bold;
					margin-left: 10rpx;
				}

				.service-info {
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}

				.info-row {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #292930;
					margin-bottom: 20rpx;
				}

				.label {
					color: #666;
				}

				.value {
					color: #000;
				}

				.price {
					font-size: 30rpx;
					font-weight: bold;
				}

				.action-buttons {
					margin-top: 20rpx;
					display: flex;
					justify-content: flex-end;
					gap: 20rpx;
				}

				.btn {
					padding: 12rpx 20rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					text-align: center;
				}

				.cancel-btn {
					background-color: #F3F2F2;
					color: #000;
				}

				.modify-btn {
					background-color: #FFEAD3;
					color: #FD7B12;
					font-weight: bold;
				}

				.confirm-btn {
					background-color: #FFEAD3;
					color: #FD7B12;
					font-weight: bold;
				}

				/* 加载状态 */
				.loading-container {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 40rpx 0;
				}

				/* 没有更多数据 */
				.no-more {
					text-align: center;
					padding: 40rpx 0;
					color: #999;
					font-size: 28rpx;
				}

				/* 空状态 */
				.empty-state {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 100rpx 0;

					.empty-image {
						width: 200rpx;
						height: 200rpx;
						margin-bottom: 30rpx;
						opacity: 0.6;
					}

					.empty-text {
						font-size: 28rpx;
						color: #999;
					}
				}
			}
		}

		// 改价模块
		.modify-price-popup {
			width: 100%;
			padding: 40rpx 30rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			text-align: center;
			box-sizing: border-box;

			.popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				padding: 0 10rpx;

				.popup-title-left {
					font-size: 32rpx;
					color: #000;
					font-weight: bold;
					flex: none;
				}

				.order-number-text {
					font-size: 28rpx;
					color: #666;
					flex: 1;
					text-align: center;
					margin: 0 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.popup-title {
					font-size: 36rpx;
					color: #000;
					font-weight: bold;
					flex: 1;
					text-align: center;
				}
			}

			.price-input-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 50rpx;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #eee;

				.currency-symbol {
					font-size: 60rpx;
					color: #000;
					margin-right: 20rpx;
					font-weight: bold;
				}

				.price-input {
					width: 400rpx;
					height: 80rpx;
					border: none;
					outline: none;
					font-size: 60rpx;
					text-align: center;
					color: #000;
					font-weight: bold;
					background: transparent;

					&::placeholder {
						color: #ccc;
					}
				}
			}

			.keyboard {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				margin-bottom: 40rpx;
				padding: 0 10rpx;

				.key-row {
					display: flex;
					justify-content: space-between;
					gap: 20rpx;
				}

				.key {
					flex: 1;
					height: 100rpx;
					line-height: 100rpx;
					background-color: #f8f8f8;
					border-radius: 12rpx;
					font-size: 36rpx;
					color: #333;
					text-align: center;
					cursor: pointer;
					transition: all 0.2s;
					font-weight: 500;

					&:active {
						background-color: #e8e8e8;
						transform: scale(0.95);
					}

					&.key--empty {
						background-color: transparent;
						cursor: default;

						&:active {
							background-color: transparent;
							transform: none;
						}
					}
				}

				.delete-key {
					background-color: #f0f0f0;
					color: #666;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.action-buttons {
				display: flex;
				justify-content: space-between;
				gap: 20rpx;
				padding: 0 10rpx;

				.btn {
					flex: 1;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 45rpx;
					font-size: 32rpx;
					font-weight: bold;
					text-align: center;
					cursor: pointer;
					transition: all 0.2s;
				}

				.cancel-btn {
					background-color: #f5f5f5;
					color: #666;

					&:active {
						background-color: #e5e5e5;
					}
				}

				.confirm-btn {
					background-color: #FFA704;
					color: white;

					&:active {
						background-color: #e69a00;
					}

					&.confirm-btn--disabled {
						background-color: #f5f5f5;
						color: #ccc;
						cursor: not-allowed;

						&:active {
							background-color: #f5f5f5;
							transform: none;
						}
					}
				}
			}
		}
	}
</style>